<template>
  <div class="article-comments">
    <!-- 评论列表 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell
        v-for="item in list"
        :key="item.com_id.toString()"
      >
        <van-image
          slot="icon"
          round
          width="30"
          height="30"
          style="margin-right: 10px;"
          :src="item.aut_photo"
        />
        <span slot="title" style="color: #466b9d;">{{ item.aut_name }}</span>
        <div slot="label">
          <p style="color: #363636;">{{ item.content }}</p>
          <p>
            <span style="margin-right: 10px;">{{ item.pubdate | relativeTime }}</span>
            <van-button size="mini" type="default" @click="showCommentReply(item)">回复{{ item.reply_count }}</van-button>
          </p>
        </div>
        <van-icon slot="right-icon" name="like-o" />
      </van-cell>
    </van-list>
    <!-- 评论列表 -->

    <!-- 发布评论 -->
    <van-cell-group class="publish-wrap">
      <van-field
        v-model="value"
        clearable
        placeholder="请输入评论内容"
      >
        <van-button slot="button" size="mini" type="info" @click="addComment">发布</van-button>
      </van-field>
    </van-cell-group>
    <!-- /发布评论 -->
    <!-- 评论回复的弹出层 -->
    <van-popup v-model="commentReply" round position="bottom" :style="{ height: '80%' }">
      <!-- 评论回复组件
        bug问题  点击过一次回复列表后 ,后续的点击都展示的是第一次展示的数据
        原因: 这个组件并没有被销毁
        解决: 使用v-if 销毁弹出层内容组件
      -->
      <comment-reply v-if="commentReply" :current-reply="currentReply" @close="commentReply = false" />
    </van-popup>
  </div>
</template>

<script>
import { reqGetComments, reqAddComments } from '@/api/comment'
import CommentReply from './comment-reply'
export default {
  name: 'ArticleComment',
  components: { CommentReply },
  props: {
    id: {
      // type: [String, Number], // 可以设置type类型为多个类型
      type: String, // 可以设置type类型为多个类型
      required: true
    }
  },
  data() {
    return {
      list: [], // 评论列表
      loading: false, // 上拉加载更多的 loading
      finished: false, // 是否加载结束
      offset: null,
      value: '',
      commentReply: false, // 评论回复弹出层布尔值
      currentReply: {} // 点击的评论项
    }
  },
  // beforeCreate() {
  //   console.log('son beforeCreate')
  // },
  async created() {
    // const res = await reqGetComments('a', this.id, null)
    // console.log(res)
  },
  // beforeMount() {
  //   console.log('son beforeMount')
  // },
  // mounted() {
  //   console.log('son mounted')
  // },
  methods: {
    async onLoad() {
      const { data: { data: { results, last_id }}} = await reqGetComments('a', this.id, this.offset)
      console.log(results)
      // 将results 追加赋值给list
      this.list.push(...results)
      // console.log(last_id)
      // 将last_id赋值 保证 下一页的数据的请求
      this.offset = last_id
      // 手动关闭loading
      this.loading = false
      // 没有数据处理
      if (!results.length) {
        this.finished = true
      }
    },
    // 发布评论
    async addComment() {
      if (!this.value.trim()) return this.$toast('请输入评论内容再评论')
      // console.log('发表评论', this.value)
      try {
        // 发送请求
        const res = await reqAddComments(this.id, this.value)
        // console.log(res)
        // 不能传递字符 将最新的评论追加最前面  更新视图
        this.list.unshift(res.data.data.new_obj)
        // 发布完成评论清空输入框
        this.value = ''
        // 提示评论
        this.$toast.success('评论成功')
      } catch (error) {
        // 400 错误  有的文章禁止评论
        this.$toast.fail('文章禁止评论')
      }
    },
    // 点击回复按钮展示弹层
    showCommentReply(item) {
      // console.log(item)
      this.currentReply = item
      this.commentReply = true
    }
  }
}
</script>

<style scoped lang='scss'>
// 发表评论的区域是固定在下端的
.publish-wrap {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}
// 给发表评论区空出地方
.van-list {
  margin-bottom: 45px;
}
</style>
